<template>
  <div class="user">
    <!-- 新增与搜索 -->
    <div class="add-search">
      <el-button
        type="primary"
        style="height: 40px; width: 80px"
        @click="dialogVisible = true"
        >+新增</el-button
      >
      <div>
        <input type="text" placeholder="请输入" />
        <el-button type="primary" style="height: 40px; width: 70px"
          >搜索</el-button
        >
      </div>
    </div>
    <!-- 用户信息展示 -->
    <el-table
      :data="list"
      border
      height="540px"
      style="width: 100%"
      :row-style="{ height: '50px' }"
    >
      <el-table-column
        v-for="(item, index) in tableLabels"
        :prop="item.prop"
        :label="item.label"
        width="220px"
      />
      <el-table-column align="left">
        <template #default="scope">
          <el-button>编辑</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column></el-table
    >
    <!-- 底部分页 -->
    <el-pagination
      background
      :page-size="20"
      :pager-count="10"
      layout="prev, pager, next"
      :total="1000"
    />
    <!-- 新增模态框 -->
    <el-dialog
      v-model="dialogVisible"
      title="新增用户"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 新增用户信息 -->
      <el-form :inline="true" :model="formUser" ref="userForm">
        <el-row :gutter="10">
          <el-col :span="12"
            ><el-form-item label="姓名">
              <el-input
                v-model="formUser.name"
                placeholder="请输入姓名"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input v-model="formUser.age" placeholder="请输入年龄">
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="formUser.sex" placeholder="请选择性别">
                <el-option label="男" value="m"></el-option>
                <el-option label="女" value="f"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="formUser.birth"
                type="date"
                label="出生日期"
                placeholder="请输入日期"
              ></el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="地址">
              <el-input
                v-model="formUser.address"
                placeholder="请输入地址"
              /> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <!-- 底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button class="addbtn" type="primary" @click="onSubmit()"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import api from '../../api/api'
import user from '../../api/mockData/user'
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'
const list = user.List
//表头数据
const tableLabels = [
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '性别',
    prop: 'sex'
  },
  {
    label: '年龄',
    prop: 'age'
  },
  {
    label: '出生日期',
    prop: 'birthday'
  },
  {
    label: '地址',
    prop: 'address'
  }
]
//表格数据
const tableLists = [
  {
    name: '张三',
    sex: '男',
    age: '20',
    birthday: '2000-3-5',
    address: '北京市朝阳区'
  },
  {
    name: '李四',
    sex: '男',
    age: '21',
    birthday: '1999-3-5',
    address: '北京市海淀区'
  },
  {
    name: '王五',
    sex: '男',
    age: '20',
    birthday: '2000-6-5',
    address: '武汉市武昌区'
  },
  {
    name: '张三',
    sex: '男',
    age: '20',
    birthday: '2000-3-5',
    address: '北京市朝阳区'
  },
  {
    name: '张三',
    sex: '男',
    age: '20',
    birthday: '2000-3-5',
    address: '北京市朝阳区'
  },
  {
    name: '张三',
    sex: '男',
    age: '20',
    birthday: '2000-3-5',
    address: '北京市朝阳区'
  },
  {
    name: '张三',
    sex: '男',
    age: '20',
    birthday: '2000-3-5',
    address: '北京市朝阳区'
  },
  {
    name: '张三',
    sex: '男',
    age: '20',
    birthday: '2000-3-5',
    address: '北京市朝阳区'
  },
  {
    name: '张三',
    sex: '男',
    age: '20',
    birthday: '2000-3-5',
    address: '北京市朝阳区'
  },
  {
    name: '张三',
    sex: '男',
    age: '20',
    birthday: '2000-3-5',
    address: '北京市朝阳区'
  }
]
//控制新增模态框是否展现
const dialogVisible = ref(false)
// 添加用户的form数据
const formUser = reactive({
  name: '',
  age: '',
  sex: '',
  birth: '',
  address: ''
})
//关闭模态框提示
const handleClose = (done) => {
  ElMessageBox.confirm('确定关闭吗？')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
// 添加用户
// const onSubmit = async () => {
//   let res = await api.addUser(formUser)
//   console.log(res)
//   if (res) {
//     //重置表单数据
//     $refs.userForm.resetFileds()
//   }
// }
onMounted(async () => {
  console.log(list)
})
</script>
<style lang="less" scoped>
.user {
  height: 700px;
  position: relative;
  .add-search {
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      display: flex;
      align-items: center;
    }
    input {
      width: 180px;
      height: 33px;
      margin-right: 10px;
      border-radius: 5px;
      font-size: 18px;
    }
  }
  position: relative;
  .el-table {
    font-size: 18px;
    box-shadow: 0 0 25px #cacace;
    color: black;
  }
  .el-pagination {
    position: absolute;
    right: 0;
    margin-top: 0;
  }
}
</style>
